DAY 24 - Nuxt Routing 路由 與動態路由

Nuxt Routing

Nuxt 路由是基於vue-router 來使用， 依據資料夾 pages 自動創建路由，所以page 裡的名稱會直接顯示在路由，這邊就不會用大駝峰寫法，而是直接命名頁面名稱。

範例:
我有兩個頁面其中一個是動態路由，一個是一般頁面，來看看範例
Nuxt 因為自動引入特性，會自動將 pages 資料夾自動創建路由所以結構會長這樣

pages/
--| about.vue
--| posts/
----| [id].vue

那它背後自動引入的vue-router 路由會長這樣

{
  "routes": [
    {
      "path": "/about",
      "component": "pages/about.vue"
    },
    {
      "path": "/posts/:id",
      "component": "pages/posts/[id].vue"
    }
  ]
}

Nuxt 路由特性

• file system router 系統命名路由 : 依照 pages 資料夾系統自動創建
• Nuxt routing : 背後原理是基於 vue-router 產生 router 並建立對應的 URL

切換路由鏈結 <NuxtLink>

前一篇有稍微提到<NuxtLink>是取代<a>及<router-link>的替代品，可以透過 NuxtLink 來切換路由，下面提供範例 :

<template>
  <header>
    <nav>
      <ul>
        <li><NuxtLink to="/about">About</NuxtLink></li>
        <li><NuxtLink to="/posts/1">Post 1</NuxtLink></li>
        <li><NuxtLink to="/posts/2">Post 2</NuxtLink></li>
      </ul>
    </nav>
  </header>
</template>

Nuxt 3 動態路由

什麼是動態路由呢？
試想一下假設你需要做一個商品頁面，每一頁都是相同的，只是我要代入不同資料，那如果有 50、100、200 商品我不是就要有 100 頁 !!!，然後要修改也要全部一起修改，是不是會搞死自己 !??

所以這時候就可以使用到動態路由，我可以代入任何 params(參數)，可以用在任何情境

Vue 及 Nuxt 動態路由差異
Vue 動態路由會用_id.vue，而 Nuxt則是用 [id].vue ，兩者寫法上會稍微不同，但是原理上都是一樣的

嘗試 ! 建立一個動態路由

接著練習看看試著新增一個動態路由ID ，我們先在 pages下新增一個 product資料夾裡面新增[id].vue，資料夾結構如下圖

接著我們回到 product.vue 頁面我們將裡面用NuxtLink 放入動態路由id 的連結，並先建立預設 id 兩組(開發會代入ID) ，<NuxtPage />就是之後點選連結後顯示畫面的位置

//product.vue
<script lang="ts" setup>
//預設id、id2
const id = 123;
const id2 = 456;
</script>

<template><template>
  <div>
    <p>product</p>
    <nuxt-link :to="`/product/${id}`" style="margin-right: 8px">商品細節1</nuxt-link>
    <nuxt-link :to="`/product/${id2}`">商品細節2</nuxt-link>
    <NuxtPage />
  </div>
</template>

接著來到 [id].vue 在裡面使用$route.params顯示對應的 ID 來查看

//[id].vue
<template>
  <div>
    <p>id: {{ $route.params.id }}</p>
  </div>
</template>

這時候可以測試點選不同連結，會代入不同商品ID，顯示對應畫面，這就是動態路由概念

範例程式碼 Github - nuxt3-eslint

使用 useRoute() 取得當前路由

我們可以用 $route.params取得，也可以使用 useRoute()

$route.params

//可以直接當模板用
const User = {
  template: '<div>User {{ $route.params.id }}</div>',
}

也可以查看 Vue Router 官方文件有更多的用法及細節教學。

useRoute()

<script setup>
const route = useRoute()
console.log(route.params.id)
// 例如你的路由路徑是 /posts/1, route.params.id 取出就會是 1
</script>